<template>
  <view w-full box-border px-20rpx mt-20rpx>
    <view bg="#fff" rounded-20rpx px-20rpx box-border relative mb-20rpx>
      <view w-full h-100rpx flex items-center text-28rpx text-black style="border-bottom: 1px solid #eee">
        <view mr-40rpx font-500>{{ typeObj[type] }}名称</view>
        <view>{{ type === 1 ? detailInfo.unitName : detailInfo.schoolName }}</view>
      </view>
      <view w-full h-100rpx flex items-center text-28rpx text-black style="border-bottom: 1px solid #eee">
        <view mr-40rpx>{{ typeObj[type] }}地址</view>
        <view>{{ type === 1 ? detailInfo.unitAdress : detailInfo.schoolAdress }}</view>
      </view>
      <view v-if="type === 1" w-full h-100rpx flex items-center text-28rpx text-black>
        <view mr-40rpx>统一社会信用代码</view>
        <view>{{ detailInfo.creditCode }}</view>
      </view>
      <view
        absolute
        right-0
        top-0
        w-120rpx
        h-60rpx
        rounded-tr-20rpx
        rounded-bl-40rpx
        bg="#2AAC38"
        text-24rpx
        text="#fff"
        flex
        justify-center
        items-center>
        已通过
      </view>
    </view>
    <view bg="#fff" rounded-20rpx px-20rpx box-border relative>
      <view h-110rpx font-500 text-32rpx text="#7D7D7D" flex items-center style="border-bottom: 1px solid #eee">
        已关联成员
      </view>
      <scroll-view scroll-y enhanced :show-scrollbar="false" :style="{ maxHeight: pageHeight + 'px' }">
        <view v-for="item in detailInfo.familyMemberList" flex justify-between items-center h-100rpx text-28rpx>
          <view text-black>{{ item.memberName }}</view>
          <view text="#D03939" @click="unBindMember(item)">解绑</view>
        </view>
        <view
          v-if="detailInfo.familyMemberList.length === 0"
          w-670rpx
          h-450rpx
          flex
          flex-col
          justify-center
          items-center>
          <image w-322rpx h-300rpx src="@/pages/company/static/member_empty.png"></image>
          <view text="#B7B7B7" text-28rpx mt-20rpx font-500>暂无关联人员</view>
        </view>
      </scroll-view>
    </view>
    <nut-popup
      :custom-style="{ height: '500rpx', borderRadius: '20rpx 20rpx 0 0' }"
      :round="true"
      safe-area-inset-bottom
      position="bottom"
      v-model:visible="isBindStatus">
      <view bg="#fff" rounded-20rpx px-30rpx box-border relative>
        <view h-110rpx font-500 text-32rpx flex justify-between items-center style="border-bottom: 1px solid #eee">
          <view text="#FCC300" @click="isBindStatus = false">取消</view>
          <view text="#7D7D7D">请选择关联成员</view>
          <view text="#FCC300" @click="bindMember">确定</view>
        </view>
        <scroll-view scroll-y enhanced :show-scrollbar="false" style="height: 390rpx">
          <view
            v-for="item in memberList"
            flex
            justify-between
            items-center
            h-100rpx
            text-28rpx
            @click="
              () => {
                item.isChecked = !item.isChecked
              }
            ">
            <view text-black>{{ item.nickName }}</view>
            <view>
              <image v-if="item.isChecked" w-34rpx h-34rpx src="@/pages/company/static/check.png"></image>
              <image v-else w-34rpx h-34rpx src="@/pages/company/static/un_check.png"></image>
            </view>
          </view>

          <view v-if="memberList.length === 0" w-670rpx h-450rpx flex flex-col justify-center items-center>
            <image w-322rpx h-300rpx src="@/pages/company/static/member_empty.png"></image>
            <view text="#B7B7B7" text-28rpx mt-20rpx font-500>暂无家庭成员</view>
          </view>
        </scroll-view>
      </view>
    </nut-popup>
  </view>
  <view position-fixed bottom-70rpx w-full z-999 px-40rpx box-border>
    <view
      w-670rpx
      h-100rpx
      rounded-50rpx
      bg="#FCC300"
      flex
      justify-center
      items-center
      font-500
      text="#000"
      text-32rpx
      @click="getMemberList">
      关联成员
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import {
  selectSchoolDetail,
  unBindMemberSchoolRelation,
  bindMemberSchoolRelation,
  selectMyFamilyMemberListBySchool
} from '@/api/mySchool'
import {
  selectUnitDetail,
  unBindMemberUnitRelation,
  bindMemberUnitRelation,
  selectMyFamilyMemberListByUnit
} from '@/api/myUnit'
const pageHeight = ref(1000)
const typeObj = ref<any>({
  1: '单位',
  2: '学校'
})
const id = ref<string | number>('')
const type = ref<number>(1)
const memberList = ref<any>([])
const detailInfo = ref<any>({})
const isBindStatus = ref(false)

onMounted(() => {
  const systemInfo: any = uni.getWindowInfo()
  pageHeight.value = systemInfo.safeArea.height - 40 - (systemInfo.screenWidth / 750) * 650
})

// 获取详情
function getDetail() {
  const selectDetail = type.value === 1 ? selectUnitDetail : selectSchoolDetail
  selectDetail(id.value).then((res: any) => {
    detailInfo.value = res.data.result
  })
}

function bindMember() {
  const api = type.value === 1 ? bindMemberUnitRelation : bindMemberSchoolRelation
  api({
    [type.value === 1 ? 'unitId' : 'schoolId']: id.value,
    memberIdList: memberList.value.filter((i: any) => i.isChecked).map((i: any) => i.id)
  }).then((res: any) => {
    uni.showToast({
      title: '关联成功',
      icon: 'none'
    })
    getDetail()
    isBindStatus.value = false
  })
}

// 解绑
function unBindMember(item: object | any) {
  const api = type.value === 1 ? unBindMemberUnitRelation : unBindMemberSchoolRelation
  api({
    id: item.id,
    parentId: item.parentId,
    memberId: item.memberId,
    ...(type.value === 1 ? { unitId: item.unitId } : { schoolId: item.schoolId })
  }).then((res: any) => {
    uni.showToast({
      title: '解绑成功',
      icon: 'none'
    })
    getDetail()
  })
}

// 获取家庭成员列表
function getMemberList() {
  const fetchMemberList = type.value === 1 ? selectMyFamilyMemberListByUnit : selectMyFamilyMemberListBySchool

  fetchMemberList(id.value).then((res: any) => {
    memberList.value = res.data.result.map((item: any) => ({
      nickName: item.nickName,
      id: item.id,
      isChecked: detailInfo.value.familyMemberList.some((i: any) => i.id === item.id)
    }))
    isBindStatus.value = true
  })
}
onLoad((options: any) => {
  type.value = parseInt(options.type)
  id.value = options.id
  uni.setNavigationBarTitle({
    title: typeObj.value[type.value] + '详情'
  })
  getDetail()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
